<!DOCTYPE html>
<html lang="en" style="font-size: 200px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style style="display: block;background-color:red;">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .b-box{
            width:800px;
            height: 200px;
            margin: 0 auto;
            background-color: red;
        }
        @media screen and (max-width:400px){
            .b-box{
                width: 200px;
                background-color: blue;
            }
        }
        @media screen and (max-width:800px) and (min-width:400px){
            .b-box{
                width: 400px;
                background-color: greenyellow;
            }
        } 
        .remBox{
            width: 3.2rem;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="b-box"></div>
    <!-- 媒体查询 -->
    <div id="box" class="s-box">111</div>
    <!-- <div class="s-box">222</div> -->
    <div class="remBox"></div>
</body>
<script>
    window.onload = function(){
        aa()
        var box = document.getElementById('box'); //
        var s_box = document.getElementsByClassName("s-box")[0];  //数组 =》伪数组
        var t_box = document.getElementsByTagName('div');
        var q_box = document.querySelector('.s-box');
        var ele = document.createElement('div') 
        console.log(ele)
        console.log(box)
        console.log(s_box)
        console.log(t_box)
        console.log(q_box)
        console.log(ele)
        box.innerHTML = '<span>你好</span>'
        ele.innerHTML = "我是创建的标签"
        document.body.appendChild(ele)  //dom最后插入节点
        // function runRem(designWidth){ 
        //     //计算屏幕宽度
        //     var screen = document.body.scrollWidth;
        //     var htmlPx;
        //     console.log(screen)
        //     htmlPx = (screen / (designWidth / 100))+'px';
        //     var remstyle = document.createElement('style')
        //     remstyle.innerHTML = "html{font-size:"+htmlPx+"}"
        //     document.documentElement.firstElementChild.appendChild(remstyle)
        // }
        //PC 手机
        function aa(){
            console.log('1111')
        }

    }
    //rem问题 （the fontSize of the root element rem 表示的是页面根元素 html 的字体大小，它是css的属性，你可以直接使用，浏览器中默认字体大小为16px，因此 1rem = 16px）
</script>

</html>